<template>
	<view class="pad-lr-30 pad-tb-30">
		<view class="poRe top_view over-hid">
			<image src="/static/img/icon1.png" class="width-100 height-100 poAb top-0 left-0 radius-20" mode=""></image>
			<view class="poRe mar-top-76 ml40">
				<view class="display align-items">
					<text class="fontSize-42 col-5C3B17 fontBold">代理权益</text>
					<text class="ml20 fontSize-26 col-FD6317" v-if="info?.agency_status==0">未开通</text>
				</view>
				<view class="mar-top-30 bgfff pad-lr-14 pad-tb-20 radius-10 fontSize-28 blockin" @click="buyage" >
					购买(<text class="col-FD6317">￥{{info?.agency_price}}</text> <text style="text-decoration: line-through;">￥{{info?.agency_original }}</text> )
				</view>
			</view>
		</view>
		<view class="mar-top-30 pad-tb-50 bgfff radius-30 over-hid">
			<tm-html :content="info?.equity_content"></tm-html>
			<!-- <view class="fontSize-36 fontBold text-align-center">购买特权礼包即享各种服务权益</view>
			<view class="mar-top-24 col-9 fontSize-22 text-align-center">BUY GIFT PACKAGE AND ENJOY BENEFITS</view>
			<view class="mar-top-30 col-5C3B17 fontSize-32 fontBold text-align-center">特权代理专属权限</view>
			<view class="display align-items flex-wrap">
				<view class="mar-top-48 width25 text-align-center" v-for="item in 8">
					<image src="/static/img/icon2.png" class="proudct-item-icon-36" mode=""></image>
					<view class="fontSize-30 col-5C3B17 mar-top-20 fontBold">返现</view>
					<view class="mar-top-20 col-9 fontSize-24">获得更多返现</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="mar-top-40 pad-tb-50 bgfff radius-30 over-hid">
			<tm-html content=""></tm-html>
		</view> -->
		
		<!-- 提示框 -->
		<tm-overlay v-model:show="showWin" contentAnimation>
			<view @click.stop="">
				<view class="popup_view radius-20 bgfff text-align-center pad-tb-40">
					<view class="fontSize-40">友情提示</view>
					<view class="mar-top-40 col-6">请先绑定机具</view>
					<view class="col-f text-align-center qry_btn radius-10" @click="showWin = false">
						确认
					</view>
				</view>
			</view>
		</tm-overlay>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {agencyPage,buyAgency} from '../../utils/api'
onLoad(()=>{
	_agencyPage()
})
const info = ref()
const _agencyPage =() =>{
	agencyPage().then(res=>{
		if(res.code==1){
			info.value = res.data
		}
	})
}
const showWin = ref(false)
const buyage =() =>{
	buyAgency().then(res=>{
		if(res.code==1){
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: String(res.data.timeStamp),
				nonceStr: res.data.nonceStr,
				package: res.data.package,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success: (res) => {
					_agencyPage()
					uni.showToast({
						icon: 'none',
						title: '支付成功！'
					})
				},
				fail: (err) => {
					if (err.errMsg === 'requestPayment:fail cancel') {
						uni.showToast({
							icon: 'none',
							title: '已取消支付！'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '支付失败！'
						})
					}
				},
			})
		}else if(res.code==3){
			showWin.value = true
		}
	})
}
</script>

<style lang="scss">
@import 'equity.scss';
</style>
